<template>
  <div class="qrcode-login-mobile">
    <div class="bg"></div>
    <div class="choose-content">
      <div class="title">选择账号登录</div>
      <div class="account-list" v-loading="listLoading">
        <div class="merchant-wrapper" v-for="(merchant, merchantIndex) in accounts" :key="merchantIndex">
          <div class="ins-wrapper" v-for="(insItem, insIndex) in merchant.ins || []" :key="insIndex">
            <div class="accounts-wrapper" v-for="(accountItem, accountIndex) in insItem.accounts" :key="accountIndex">
              <div class="account-name"
                :class="{ 'account-name__active': accountItem.account === selectedAccount.account }">
                {{ insItem.name }}--{{ accountItem.name || accountItem.account || insItem.name || '暂无账号名称' }}
              </div>
              <img src="@/assets/login/choose.png" alt="" srcset="" @click="selectAccount(accountItem, insItem)">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="dialogVisible" class="overlay-moni"></div>
    <div v-if="dialogVisible" class="dialog-moni">
      <h1>温馨提示</h1>
      <h3>[{{ selectedIns.name }}-{{ selectedAccount.name || selectedAccount.account||'暂无账号名称'}}]</h3>
      <p>确认登录此账号？</p>
      <div class="button-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button :disabled="isLoginBtnDisable" @click="login" v-loading="loginLoading" class="blue">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { loginByQRCode, selectAccounts } from "@/api/login";
import { ElMessage } from "element-plus";
import vconsole from "vconsole";
import { IAccMerchant, IAccount } from "@/api/modules/login";
import {useMobileCssScale} from "@/compositions/mainContent/useMobileCssScale";

const route = useRoute()
const router = useRouter()
const dialogVisible = ref(false)
const certificate = ref<string>('')
const accounts = ref<IAccMerchant[]>([])
const listLoading = ref(false)
const getAccountsList = async () => {
  const tag = route.query.tag as string ?? ''
  const wxCode = route.query.code as string ?? ''
  listLoading.value = true
  const rs = await selectAccounts({
    tag,
    wxCode,
    app: 'merchant'
  })
  listLoading.value = false
  if (rs.code === 200) {
    certificate.value = rs.payload?.certificate ?? ''
    accounts.value = rs.payload?.merchantAccounts ?? []
  } else {
    ElMessage.error(rs?.errorMsgDesc ?? '请重新扫码')
  }
}
const selectedAccount = ref<IAccount>({} as IAccount)
const selectedIns = ref({})
const selectAccount = (accountItem: IAccount, insItem: any) => {
  selectedAccount.value = accountItem
  selectedIns.value = insItem
  dialogVisible.value = true
}

const loginLoading = ref(false)
const isLoginBtnDisable = ref(false)
const login = async () => {
  loginLoading.value = true
  const rs = await loginByQRCode({
    certificate: certificate.value,
    account: selectedAccount.value.account
  })
  loginLoading.value = false

  if (rs.code === 200) {
    ElMessage.success({
      message: '登录成功，可以关闭此页面',
      duration: 0,
    })
    isLoginBtnDisable.value = true
    dialogVisible.value=false
  }
}

const getQuery = () => {
  return new Promise<void>((resolve) => {
    const authUrlQueryString = (location.href.match(/\?.+(?=#)/i)?.[0] ?? '').replace('?', '')
    const newHref = location.href.replace('?' + authUrlQueryString, '')

    if (authUrlQueryString) {
      location.replace(newHref + '&' + authUrlQueryString)
    } else {
      resolve()
    }
  })
}

// 移动端样式兼容
useMobileCssScale()

onBeforeMount(() => {
  getQuery().then(() => {
    getAccountsList()
  })
})

onMounted(() => {
  new vconsole()
})

</script>

<style scoped lang="scss">
.qrcode-login-mobile {
  //max-width: 450rem;
  margin: 0 auto;
  padding-bottom: 100rem;

  .bg {
    width: 750rem;
    height: 578rem;
    background: url("@/assets/login/bg.png") no-repeat center/100% 100%;
  }

  .choose-content {
    margin-top: -40rem;
    background: #FFFFFF;
    box-shadow: 0rem -6rem 18rem 0rem rgba(75, 147, 255, 0.08);
    border-radius: 40rem 40rem 0rem 0rem;
    padding: 30rem;
    box-sizing: border-box;
  }

  .title {
    font-size: 34rem;
    font-weight: bold;
  }
}

.account-list {
  margin-top: 15rem;

  .merchant-wrapper {
    margin-bottom: 10rem;

    .merchant-name {
      font-size: 16rem;
      color: #333;
      padding: 10rem;
    }
  }

  .ins-wrapper {
    margin-bottom: 5rem;

    .ins-name {
      font-size: 16rem;
      color: #666;
      padding: 10rem 0;
      margin: 0 20rem;
    }
  }

  .accounts-wrapper {
    height: 49rem;
    background: #F0F3FA;
    border-radius: 24rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 20rem;

    .account-name {
      width: 222rem;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      font-size: 17rem;
      color: #999;
      padding: 10rem;
      margin: 0 10rem;
      border-bottom: solid 1rem #eee;
      transition: all ease-in 300ms;
    }

    img {
      width: 46rem;
      height: 46rem;
    }

    // .account-name__active {
    //   background: rgba(232, 242, 255, 0.5000);
    //   color: var(--el-color-primary);
    //   border-radius: 5rem;
    //   border-bottom: solid 1rem transparent;

    // }
  }
}

.fixed-button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10rem 10rem 10rem;
  padding-bottom: calc(10rem + constant(safe-area-inset-bottom));
  padding-bottom: calc(10rem + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  box-sizing: border-box;
  background: white;

  :deep(.el-button) {
    width: 100%;
  }
}
.overlay-moni{
  position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index:100;
    background-color: rgba(0, 0, 0, .7);
}
.dialog-moni {
  width: 270rem;
  height: 160rem;
  background: #FFFFFF;
  border-radius: 14rem;
  position: fixed;
  z-index:150;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-top: 20rem;
  box-sizing: border-box;

  h1 {
    width:100%;
    text-align: center;
    font-size: 18rem;
    color: #000000;
    line-height: 18rem;
    margin-bottom: 12rem;
  }
  h3 {
      width:100%;
      text-align: center;
      font-size: 15rem;
      color: #505052;
      line-height: 15rem;
      margin-bottom: 10rem;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

    p {
      width:100%;
      text-align: center;
      font-size: 15rem;
      color: #888888;
      line-height: 15rem;
      margin-bottom: 5rem;
    }
    .button-footer{
      position: absolute;
      bottom:0;
      left:0;
       display: flex;
       width:100%;
       height:50rem;
       overflow: hidden;
       :deep(.el-button){
        height:50rem;
          width:50%;
          border:0;
          border-top:1rem solid #DCDEE3;
          border-right:1rem solid #DCDEE3;
          margin:0 !important;
          color: #000000;
       }
       .blue{
        color: #1964FA;
       }
    }
}
</style>
